React has evolved over the years and some concepts were replaced by better ones.
1. Using classes
Every time we wanted to use state or take advantage of lifecycle methods we had to compose a Javascript class to create a React component. Even if we did not have a need to use these features we were choosing a class in advance, because you never know when your component will demand a state or side effects.
Fortunately, early 2019 React 16.8 was released with the feature of hooks. React hooks provides us an ability to replace a state with useState hook which is much handier than the previous state concept.
Lifecycle methods also are replaced by React hooks.useEffectruns on every render and gives an opportunity to get rid of lifecycle methods completely.
2. Using lifecycle methods
To be honest, when I first read about useEffectI did not get how a single method can replace several: componentDidMount, componentDidUpdate, and componentWillUnmount?
The thing is that the React team considered lifecycle methods harmful and decided to get rid of them, it turns out that the same functionality can be reached by the side effect concept.
You can define useEffect function which describes what needs to be done after every render, in the described function you can return another function which will be called before every new render or on component unmount phase.
You may say that it’s not wise from the side of performance or that “you should not slam an API on every rerender”, and you would be right. Obviously, this was covered by the team of React, there are ways how to alter your useEffectfunction to work as you want and need. If you want to know how that can be done, React documentation is ready for you ?
3. Wrapping return content to div/array
If you ever used React longer than a week, you definitely faced the Adjacent JSX elements must be wrapped in an enclosing tag. error. This simply means that you cannot return more than one batch from the rendermethod.
Back in the day solution was to wrap elements to the div, but with this, we end up having a lot of redundant divs in the HTML. Later React 16.0provided us the ability to get rid of redundant divs by putting elements to the array and then returning it.
With the release of React 16.2 fragments were introduced. Now if you want to return multiple elements from therender method you just simply wrap those inside <></> and the problem solved. Now you can forget div/array wrappers as a solution to this problem
There is one exception still
You will not avoid using classes and lifecycle methods when you create error boundaries. Long story short, error boundaries are components that are created to catch exceptions happening in child components. The boundaries require to use lifecycle methods — getDerivedStateFromError or componentDidCatch .
However this is not what we use in everyday development, error boundaries are set once for the project and left to do their job. Furthermore, the Reactteam has marked in the documentation that hooks for replacing these lifecycle methods will be created soon ?
I am not encouraging you to forget these
Don’t get me wrong, I am not trying to wipe these ideas from your mind. Remembering these can be really useful especially if you jump into an old React project.
By this article, I want to show how React has evolved and which concepts can be ditched when developing from scratch.
What is your opinion about moving to the new concepts in frameworks? Are you an enthusiast of innovation or you prefer sticking to the time tested classics?
